<template>
	<view class="content">
		<view class="header">
			<!-- 搜索 -->
			<view class="search">
				<input class="uni-input" focus placeholder="搜索" @input='searchValue' />
				<view class="screen">
					<view class="icon">


						<image src="../../../static/images/finance/screen.png" mode="heightFix"></image>


						<image src="../../../static/images/finance/screen.png" mode="heightFix"></image>

						<image src="/finance/static/images/screen.png" mode="heightFix"></image>



						<image src="/finance/static/images/screen.png" mode="heightFix"></image>

					</view>
					<view class="font24">
						筛选
					</view>
				</view>
			</view>
		</view>
		<!-- 订单 -->
		<view class="box">
			<view class="order">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower">
					<view class="item" v-for="(item,index) in dataList" :key="index">
						<view class="info">
							<view class="orderId font32 font500">
								订单号：{{item.orderId}}
							</view>
							<view class="profit font36 font800">
								+{{item.profit}}
							</view>
						</view>
						<view class="dataBox">
							<view class="chart">
								<qiun-data-charts type="ring" :opts="opts" :chartData="item.chartData" />
							</view>
							<view class="p_info">
								<view class="lever">
									<view class="technician l_item">
										<view class="dian"></view>
										<view class="des">
											技师：{{toFixedWithoutRound((item.technician / item.profit) * 100)}}%
										</view>
									</view>
									<view class="shopowner l_item">
										<view class="dian"></view>
										<view class="des">
											店长：{{toFixedWithoutRound((item.shopowner / item.profit) * 100)}}%
										</view>
									</view>
									<view class="shareholder l_item">
										<view class="dian"></view>
										<view class="des">
											股东：{{toFixedWithoutRound((item.shareholder / item.profit) * 100)}}%
										</view>
									</view>
									<view class="distribution l_item">
										<view class="dian"></view>
										<view class="des">
											分销商：{{toFixedWithoutRound((item.distribution / item.profit) * 100)}}%
										</view>
									</view>
								</view>
								<view class="l_profit">
									<view class="des">
										{{item.technician}}
									</view>
									<view class="des">
										{{item.shopowner}}
									</view>
									<view class="des">
										{{item.shareholder}}
									</view>
									<view class="des">
										{{item.distribution}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0, //初始化滚动高度
				dataList: [{
					orderId: '54515456456',
					profit: '752.00',
					technician: '120.00',
					shopowner: '256.00',
					shareholder: '256.00',
					distribution: '120.00',
					chartData: {
						series: [{
							silent: false,
							data: [{
								"name": "技师",
								"value": 120,
							}, {
								"name": "店长",
								"value": 256,
							}, {
								"name": "股东",
								"value": 256,
							}, {
								"name": "分销商",
								"value": 120,
							}]
						}]
					}
				}, {
					orderId: '54515456456',
					profit: '1545.00',
					technician: '256.00',
					shopowner: '120.00',
					shareholder: '120.00',
					distribution: '256.00',
					chartData: {
						series: [{
							silent: false,
							data: [{
								"name": "技师",
								"value": 256,
							}, {
								"name": "店长",
								"value": 120,
							}, {
								"name": "股东",
								"value": 120,
							}, {
								"name": "分销商",
								"value": 256,
							}]
						}]
					}
				}],
				opts: {
					// 横屏模式
					rotate: false,
					// 横屏锁定
					rotateLock: false,
					color: ["#1BB9A3", "#F8BA43", "#FC8888", "#538FF8"],
					// padding: [0, 0, 0, 0],
					// 是否显示圆环上的解释
					dataLabel: false,
					enableScroll: false,
					legend: {
						// 是否显示右侧图例
						show: false,
						position: "",
						lineHeight: 25,
					},
					title: {
						name: "",
						fontSize: 15,
						color: "#666666"
					},
					subtitle: {
						name: "",
						fontSize: 25,
						color: "#7cb5ec"
					},
					extra: {
						ring: {
							// 饼的宽度
							ringWidth: 10,
							activeOpacity: 0.5,
							activeRadius: 10,
							// 颜色的角度
							offsetAngle: 18,
							labelWidth: 15,
							// 是否绘制圆环中间的的隔线
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						},
					}
				}, //画圆环图
			}
		},
		onLoad() {

		},
		methods: {
			searchValue(e) {
				console.log(e.detail.value, '3');
			},
			// 滚动到底部
			scrolltolower() {},
			// 计算百分比
			toFixedWithoutRound(num) {
				const factor = Math.pow(10, 2);
				return Math.floor(num * factor) / factor;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.header {
			background-color: #fff;
			width: 100%;

			.search {
				padding: 16rpx 43rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.uni-input {
					flex: 1;
					height: 66rpx;
					padding-left: 36rpx;

					/deep/.input-placeholder {
						font-size: 24rpx
					}
				}

				.screen {
					display: flex;
					align-items: center;

					.icon {
						margin-right: 8rpx;

						image {
							height: 21rpx;
						}
					}
				}
			}
		}

		.box {
			padding: 0 29rpx;

			// 订单
			.order {
				.scroll-Y {
					height: calc(100vh - var(--status-bar-height) - 98rpx);

					.item {
						padding: 33rpx 53rpx 51rpx 51rpx;
						margin-bottom: 15rpx;

						.info {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.orderId {}

							.profit {
								color: #FF4A00;
							}
						}

						.dataBox {
							margin-top: 68rpx;
							display: flex;
							align-items: center;

							.chart {
								margin-right: 32rpx;
								width: 168rpx;
								height: 168rpx;
							}

							.p_info {
								flex: 1;
								display: flex;
								align-items: center;
								justify-content: space-between;

								.lever {
									line-height: 44rpx;

									.l_item {
										display: flex;
										align-items: center;

										.dian {
											width: 15rpx;
											height: 15rpx;
											border-radius: 50%;
											margin-right: 6rpx;
										}

										.des {
											color: #666666;
										}
									}

									.technician {
										.dian {
											background-color: #1BB9A3;
										}
									}

									.shopowner {
										.dian {
											background-color: #F8BA43;
										}
									}

									.shareholder {
										.dian {
											background-color: #FC8888;
										}
									}

									.distribution {
										.dian {
											background-color: #538FF8;
										}
									}
								}


								.l_profit {
									.des {}
								}
							}
						}
					}
				}
			}
		}
	}
</style>